<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>群星网约车</title>
	<link rel="icon" href="../image/carMR.png" type="image/png">
	<!--这里引入页面的样式-->
	<style>
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			/* 			background-color:gainsboro; */
		}
		.logo-title {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
		}
		.logo {
			height: 50px;
		}

		.title {
			font-size: 24px;
			font-weight: bold;
		}

		.links {
			display: flex;
			align-items: center;
		}

		.links el-link {
			margin-left: 10px;
		}

		.user-info {
			display: flex;
			align-items: center;
		}

		.avatar {
			margin-right: 10px;
		}

		.username a {
			color: #333;
			text-decoration: none;
		}
		.main-content {
			padding: 20px;
		}
		.driver-info {
			position: relative;
			background-size: cover;
			background-position: center;
			margin-bottom: 20px;
			padding: 20px;
			color: white;
			text-align: center;
		}
		.overlay {
			background-color: rgba(0, 0, 0, 0.5);
			padding: 20px;
			border-radius: 10px;
		}
		.comment {
			border-bottom: 1px solid #ebeef5;
			padding-bottom: 10px;
			margin-bottom: 10px;
		}
		.user-info {
			display: flex;
			align-items: center;
		}
		.username {
			margin-left: 10px;
		}
		.date{
			margin-left: 20px;
		}
		.comment-actions {
			text-align: right;
		}
		.add-comment {
			margin-top: 20px;
		}
		.el-icon-thumb {
			font-size: 20px;
		}
		.el-icon-thumb.liked {
			color: #f56c6c;
		}
		/* 移动端样式 */
		@media (max-width: 768px) {
			.header {
				flex-direction: column;
				align-items: flex-start;
			}

			.links {
				width: 100%;
				justify-content: space-around;
				position: fixed;
				bottom: 0;
				background-color: white;
				padding: 10px 0;
				box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
				z-index: 1000;
				margin-bottom: 10px;
				margin-left: -25px;
			}

			.links el-link {
				margin-left: 0;
			}

			.user-info {
				margin-top: 10px;
				width: 100%;
				justify-content: space-between;
			}
			.logo-title {
				display: flex;
				align-items: center;
				width: 100%;
				justify-content: center;
			}

			.logo {
				height: 40px;
			}

			.title {
				font-size: 20px;
			}
		}
	</style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
	<div class="header">
		<div class="logo-title">
			<img class="logo" src="../image/carMR.png">
			<span class="title">群星网约车欢迎您</span>
		</div>
		<div class="links">
			<el-link href="userMain.html" target="_self" :underline="false">主页&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="orderUserInfo.html" target="_self" :underline="false">我的订单&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="preferential.html" target="_blank" :underline="false">群星优惠&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="taxiInfo.html" target="_blank" :underline="false">群星简介&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link href="userInfo.html" target="_self" :underline="false">个人中心&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
			<el-link target="_blank" :underline="false" @click="serviceInfo">客服中心&nbsp;&nbsp;&nbsp;&nbsp;</el-link>
		</div>
		<div class="user-info">
			<div>
				<el-avatar :src="avatar"></el-avatar>
			</div>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<span class="username"><a id="uname" href="javascript:void(0)">{{ displayUsername }}</a></span>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<el-link target="_blank" :underline="false" @click="exitInfo">退出系统</el-link>
			&nbsp;&nbsp;&nbsp;&nbsp;
		</div>
	</div>
	<div class="main-content">
		<div class="driver-info" :style="{ backgroundImage: 'url(' + driverPhoto + ')' }">
			<div class="overlay">
				<el-card>
					<div slot="header" class="clearfix">
						<span>司机信息</span>
					</div>
					<div class="text item">
						<p>司机姓名: {{ driverName }}</p>
						<p>车牌号: {{ carNumber }}</p>
						<p>电话: {{ driverPhone }}</p>
					</div>
				</el-card>
			</div>
		</div>
		<div class="comments-section">
			<el-card>
				<div slot="header" class="clearfix">
					<span>用户评论</span>
				</div>
				<div class="comment" v-for="comment in comments" :key="comment.id">
					<div class="user-info">
						<el-avatar :src="comment.pic"></el-avatar>
						<span class="username">{{ comment.nickname }}</span>
						<span class="date">{{comment.createdatetime}}</span>
					</div>
					<div class="comment-text">
						<p>{{ comment.content }}</p>
					</div>
					<div class="comment-actions">
						<el-button type="text" @click="toggleLike(comment)">
							<i :class="['el-icon-thumb', comment.liked ? 'liked' : '']"></i> {{ comment.likenum }}
						</el-button>
					</div>
				</div>
				<div class="add-comment">
					<el-input type="textarea" v-model="newComment" placeholder="写下你的评论..."></el-input>
					<el-button type="primary" @click="addComment">提交评论</el-button>
				</div>
			</el-card>
		</div>
	</div>
	<!-- 评分对话框 -->
	<el-dialog :visible.sync="rateDialogVisible" title="司机评分">
		<div style="text-align: center;">
			<el-rate v-model="rateValue" :colors="colors"></el-rate>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="rateDialogVisible = false">取消</el-button>
			<el-button type="primary" @click="submitRating">提交</el-button>
		</span>
	</el-dialog>
</div>


<script>
	// request拦截器，将用户token放入头中
	axios.interceptors.request.use(
			config => {
				let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
				if (token) {
					config.headers['token'] = token;
				}
				return config;
			},
			error => {
				console.log(error);
				return Promise.reject(error);
			}
	);
	// 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
	// 创建 Vue 实例
	new Vue({
		el: '#app',
		data() {
			return {
				userId: "",
				userName: "",
				orderId: "",
				avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
				driverPhoto: '../image/b1.jpg',
				driverName: '司机姓名',
				driverId: '',
				carNumber: '车牌号',
				driverPhone: '司机电话号码',
				comments: [
					{
						id: '1',
						pic: 'path/to/user_avatar1.jpg',
						nickname: '用户1',
						createdatetime: '2024 8 19 48239 02349',
						content: '司机服务很好，车内干净整洁。',
						likenum: 5
					},
					{
						id: '2',
						pic: 'path/to/user_avatar2.jpg',
						nickname: '用户2',
						createdatetime: '2024 8 19 48239 02349',
						content: '司机态度友好，开车技术好。',
						likenum: 3
					}
				],
				newComment: '',
				rateDialogVisible: true, // 控制评分对话框的显示
				rateValue: 0,// 保存评分值
				colors: ['#99A9BF', '#F7BA2A', '#FF9900']
			}
		},
		methods: {
			toggleLike(comment) {
				const url = comment.liked ? '/user/users/comment/decrementLike' : '/user/users/comment/incrementLike';
				axios.post(url, { commentId: comment.id })
						.then(response => {
							if (response.data.code === 1) {
								comment.likenum += comment.liked ? -1 : 1;
								comment.liked = !comment.liked;
							}
						})
						.catch(error => {
							console.error("There was an error updating like status:", error);
						});
			},
			addComment() {
				if (this.newComment.trim() !== '') {
					const newComment = {
						pic: this.avatar,
						userid: this.userId,
						nickname: this.userName,
						content: this.newComment,
						likenum: 0,
						liked: false,
						driverid: this.driverId
					};
					axios.post('/user/users/comment/addComment', newComment)
							.then(response => {
								if (response.data.code === 1) {
									newComment.id = response.data.data.id;
									newComment.createdatetime=response.data.data.createdatetime.replace('T',' ');
									newComment.content=response.data.data.content;
									this.comments.push(newComment);
									this.newComment = '';
								}
							})
							.catch(error => {
								console.error("There was an error adding the comment:", error);
							});
				}
			},
			serviceInfo() {
				// Logic for service info
			},
			submitRating() {
				if (this.rateValue > 0) {
					axios.post('/order/orders/rateDriver', {
						orderId: this.orderId,
						rateValue: this.rateValue
					})
							.then(response => {
								if (response.data.code === 1) {
									this.$message.success('评分提交成功');
									this.rateDialogVisible = false; // 关闭评分对话框
								}
							})
							.catch(error => {
								console.error("There was an error submitting the rating:", error);
							});
				} else {
					this.$message.error('请先选择评分');
				}
			},
			exitInfo(){
				localStorage.removeItem('userId');
				localStorage.removeItem('userName');
				window.location.href = "../html/login.html"; // 页面跳转
			}
		},
		mounted(){
			this.userId = localStorage.getItem('userId');
			this.userName = localStorage.getItem('userName');
			this.avatar = localStorage.getItem('pic');
			this.orderId=localStorage.getItem('orderId');
			if (this.orderId === null) {
			 	this.$message.error('该页面已过期，即将跳转到首页');
			 	setTimeout(() => {
			 		window.location.href = "../html/userMain.html";
			 	}, 3000); // 延迟2秒（2000毫秒）执行
			 }
			axios.get('/order/orders/findByDriverId?orderId=' + this.orderId)
					.then(response => {
						if (response.data.code === 1) {
							this.driverId = response.data.data.id;
							this.driverName = response.data.data.username;
							this.driverPhone = response.data.data.phoneNumber;
							this.driverPhoto = response.data.data.mainPic;
							this.carNumber=response.data.data.licensePlate;
							// Fetch comments after driver details
							return axios.get('/user/users/comment/findCommentByDriverId?driverId=' + this.driverId);
						}
					})
					.then(response => {
						if (response && response.data.code === 1) {
							this.comments = response.data.data.map(comment => {
								comment.createdatetime = comment.createdatetime.replace('T', ' ');
								return comment;
							});
						}
					})
					.catch(error => {
						console.error("There was an error fetching data:", error);
					});
			/* 		if (this.userName === null) {
                        this.$message.error('非法进入,请先登录');
                        setTimeout(() => {
                            window.location.href = "../html/login.html";
                        }, 3000); // 延迟2秒（2000毫秒）执行
                    } */
		},
		computed: {
			displayUsername() {
				// 如果 userName 不为空，显示 userName；否则显示 "未登录"
				return this.userName ? this.userName : "未登录";
			},
		}
	});
</script>
<!-- 不用vue的js代码写在下面-->
<script>
</script>
</body>
</html>